<template>
  <h2>reactive与ref-细节</h2>
  <h3>m1:{{m1}}</h3>
  <h3>m2:{{m2}}</h3>
  <h3>m3{{m3}}</h3>
  <hr color="red"/>
  <button @click="update">更新数据</button>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from "vue";

export default defineComponent({
  name: "RefDemo",
  setup(){
    //用来定义基本类型的响应式数据
    const m1 = ref('abc')
    //用来定义复杂类型的响应式数据
    const m2 = reactive({
      name: '小强',
      wife: {
        name: '小甜甜'
      }
    })
    const m3 = ref({
      name: '小强',
      wife: {
        name: '小甜甜'
      }
    })
    console.log(m3)
    // 更新数据的方法
    const update = () =>{
      console.log('哈哈')
      m1.value+= '====' // 可以正常渲染---响应式的数据
      m2.wife.name+='====' //同上
      console.log(m1)
      m3.value.wife.name+='///'
    }
    return {
      m1,m2,m3,update
    }
  }
})
// ref中可以放入复杂类型的数据，返回来的数据是Ref类型的，但是内部的数据已经成为Proxy类型的代理对象数据
</script>

<style scoped>

</style>
